<template>
    <div class="page">
        <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit" :before-leave="handleSwitch">
            <el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.name" lazy>
                <template #label>
                    <span v-if="!item.isEditable">{{item.title}}</span>
                    <el-input v-else v-model="item.title" @change="item.isEditable = false" clearable />
                    <el-icon size="small" @click="handleEditTabsTitle(item.name)">
                        <EditPen />
                    </el-icon>
                </template>
            </el-tab-pane>
        </el-tabs>
        <x-6-canvas ref="x6canvas" class="x6-container" v-if="editableTabs.length !== 0" />
        <div class="x6-container tips-text" v-else>
            <span>点击右上角的加号开始设计</span>
            <el-icon :size="60">
                <Plus />
            </el-icon>
        </div>
        <add-confirm ref="confirmDialog" @handleClose="handleNewTagConfirm" />
    </div>
</template>

<script setup name="ModDesign">
import X6Canvas from '@/components/WorkPannel/x6canvas'
import { EditPen, Pointer, Plus } from '@element-plus/icons-vue';
import { ref } from 'vue'
import useX6Store from '@/store/modules/x6canvas'
import AddConfirm from './addConfirm'

const x6Store = useX6Store()
const x6canvas = ref()
const confirmDialog = ref()

let tabIndex = 0
const editableTabsValue = ref('0')
const editableTabs = ref([])
const { proxy } = getCurrentInstance()

/** Create a new tab or remove one */
const handleTabsEdit = (targetName, action) => {
    if (action === 'add') {
        const newTabName = `x6canvas-${++tabIndex}`
        editableTabs.value.push({
            title: '标签页',
            name: newTabName,
            isEditable: false,
        })
        editableTabsValue.value = newTabName
        setTimeout(() => {
            x6canvas.value.init(newTabName)
            confirmDialog.value.init(newTabName)
        }, 50);
    } else if (action === 'remove') {
        const tabs = editableTabs.value
        let activeName = editableTabsValue.value
        if (activeName === targetName) {
            tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    const nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                        activeName = nextTab.name
                    }
                }
            })
        }
        editableTabsValue.value = activeName
        editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
        console.log(editableTabs.value)
    }
}

/** Edit tab name */
const handleEditTabsTitle = (name) => {
    editableTabs.value.forEach(item => {
        item.isEditable = false
        if (item.name === name) {
            item.isEditable = true
        }
    })
}

/**
    Save x6canvas data when switch tabs
*/
const handleSwitch = (newVal, oldVal) => {
    if (oldVal === '0') return
    if (x6canvas.value) {
        const oldData = x6canvas.value.exportData()
        x6Store.canvas.set(oldVal, oldData)
        setTimeout(() => {
            x6canvas.value.init(newVal)
        }, 100);
    }
}

const handleNewTagConfirm = (confirmCreate, x6id) => {
    if (!confirmCreate) {
        editableTabs.value = editableTabs.value.filter(item => item.name !== x6id)
        console.log(editableTabs.value)
    }
}

</script>

<style lang="scss">
.el-tabs__new-tab {
    margin-right: 12px;
    background-color: #409eff;
    i {
        color: #ffffff;
    }
}
</style>

<style lang="scss" scoped>
.page {
    height: 100%;
    display: flex;
    flex-direction: column;
    .x6-container {
        height: calc(100vh - 92px);
    }
    .tips-text {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #d3d5d7;
        span {
            font-size: 48px;
            margin-right: 24px;
        }
    }
}
</style>